<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    
    <style>
        #main{
          float: left;
          margin: 100px 0 0 300px;
            width: 400px;
            height: 650px;
        }
        #box{
          float: left;
          margin: 50px 0 0 50px;
            width: 400px;
            height: 650px;
        }
    </style>
</head>
<body>
    <div id="main"></div>
    <div id="box"></div>
</body>
<script>
      var myChart = echarts.init(document.getElementById("main"),'vintage');
    console.log(myChart);

    var option = {
        title: {
          text: '三段个人成绩'
        },
        tooltip: {
          formatter:function(params){
           if(params.data.value>=80){
            return `<div style="color:purple;">${params.seriesName}是:${params.data.value}分 你很棒 但是也要努力</div> `
           }else if(params.data.value>=60){
            return `<div style="color:green;">${params.seriesName}是:${params.data.value}勉强及格 要更加努力了</div> `
           }else{
            return `<div style="color:red;">${params.seriesName}是:${params.data.value}分不及格了 晚上别睡了 学习吧</div> `
           }
          }, 

        },
        legend: {
          data: ['机试']
        },
        xAxis: {
          data: ['2022-10-14', '2022-10-21', '2022-10-28', '2022-1-4']
        },
        yAxis: {},
        series: [
          {
            name: '机试',
            type: 'bar',
            data: [{
              value: 90,
              label:{
                show:true,
                position:'top',
                color:'purple'
              },
              itemStyle:{
                
              },
            }]
          },
        ]
      };
 myChart.setOption(option)

 var myCharts = echarts.init(document.getElementById("box"),'vintage');
 option = {
  title: {
          text: '三段个人成绩'
        },
        tooltip: {
          formatter:function(params){
           if(params.data.value>=80){
            return `<div style="color:purple;">${params.seriesName}是:${params.data.value}分 你很棒 但是也要努力</div> `
           }else if(params.data.value>=60){
            return `<div style="color:green;">${params.seriesName}是:${params.data.value}勉强及格 要更加努力了</div> `
           }else{
            return `<div style="color:red;">${params.seriesName}是:${params.data.value}分不及格了 晚上别睡了 学习吧</div> `
           }
          }, 

        },
        legend: {
          data: ['机试']
        },
  xAxis: {
    type: 'category',
    data: ['2022-10-14',]
  },
  yAxis: {
    type: 'value'
  },
  series: [
          {
            name: '机试',
            type: 'line',
            data: [{
              value: 90,
              label:{
                show:true,
                position:'top',
                color:'purple'
              },
              itemStyle:{
                
              },
            }]
          },
       
        ]
};
myCharts.setOption(option)
</script>
</html>